<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地址管理页面</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <el-tabs type="border-card" label-width="80px" style="width: 600px;">
            <template>
                <el-table type=index :data="list" border style="width: 100%">
                    <el-table-column fixed prop="name" label="收货人" width="80">
                    </el-table-column>
                    <el-table-column prop="phone" label="联系方式" width="120">
                    </el-table-column>
                    <el-table-column prop="provinceName" label="省份" width="80">
                    </el-table-column>
                    <el-table-column prop="cityName" label="城市" width="120">
                    </el-table-column>
                    <el-table-column prop="areaName" label="区县" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="详细地址" width="200">
                    </el-table-column>
                    <el-table-column prop="modifiedTime." label="更新时间" width="300">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="160">
                        <template slot-scope="scope">
                            <el-button size="mini" type="warning" round @click="handleEdit(scope.$index, scope.row)">
                                Edit</el-button>
                            <el-button size="mini" type="danger" round
                                @click="handleDelete(scope.$index, scope.row,list)">
                                Delete
                            </el-button>
                        </template>
                </el-table>
            </template>
            <br>
            <el-button type="primary" @click="toAddress" round style=>添加新地址</el-button>
        </el-tabs>
    </div>
    <script type="text/javascript">

        baseurl = "http://localhost:8085/"
        var vm = new Vue({
            el: "#app",
            data: {
                list: []
            },
            created() {
                //查询全部地址信息
                var url1 = baseurl + "addresses/list";
                axios({
                    method: "get",
                    url: url1,
                }).then((res) => {
                    this.list = res.data.data
                });
            },
            methods: {
                //修改操作：跳转到修改页面 url中带aid值
                //index——当前索引值 row——当前所在行对象
                handleEdit(index, row) {
                    console.log(index, row);
                    var aid = row.aid;
                    window.location.href = "address.html?" + aid;
                },
                //删除操作
                handleDelete(index, row, list) {
                    var aid = row.aid;
                    var url2 = baseurl + "addresses/" + aid + "/delete";
                    var id = row.aid;
                    axios({
                        method: "delete",
                        url: url2,
                    }).then((res) => {
                        if (res.data.code == 1) {
                            alert("删除成功")
                            list.splice(index, 1);
                        } else {
                            alert("删除失败")
                        }
                    });
                },
                //跳转到address页面
                toAddress() {
                    window.location.href = "address.html";
                },
            }
        });
    </script>
</body>
</html>